<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    <style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font: 13px Helvetica, Arial;
    }

    form {
        background: #000;
        padding: 3px;
        position: fixed;
        bottom: 0;
        width: 100%;
    }

    form input {
        border: 0;
        padding: 10px;
        width: 90%;
        margin-right: .5%;
    }

    form button {
        width: 9%;
        background: rgb(130, 224, 255);
        border: none;
        padding: 10px;
    }

    #messages {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    #messages li {
        padding: 5px 10px;
    }

    #messages li:nth-child(odd) {
        background: #eee;
    }
    </style>
</head>

<body>
    <ul id="messages"></ul>
    <form action="">
        <input id="m" autocomplete="off" />
        <button>Send</button>
    </form>

    <script src="/socket.io/socket.io.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
    <script>
        //连接socket服务器
        var socket = io();
        //客户端表单处理
        $('form').submit(function(){
            // 将从客户端表单中获取到的信息传输给socket，然后再在服务器中接受此处传输过去的信息内容
            socket.emit('chat message',$('#m').val());
            //清理表单消息
            $('#m').val('');
            //不刷新表单
            return false;
        });
        //接收服务器返回的消息，并插入到messages列表中
        socket.on('chat message', function(msg) {
            $('#messages').append($('<li>').text(msg));
        });
    </script>
</body>

</html>